<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String authPage = (String) request.getAttribute("authPage");
%>

<!-- 引入 Toastr CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />

<!-- 引入 Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<c:if test="${not empty requestScope.errMsg}">
    <script>
        // 调用 toastr 显示错误信息
        toastr.error("${requestScope.errMsg}", "Error", {
            closeButton: true,
            progressBar: true,
            positionClass: "toast-top-right",  // 可自定义位置
            timeOut: "5000", // 5秒后自动关闭
            extendedTimeOut: "1000" // 鼠标悬停时，延长关闭时间
        });
    </script>
</c:if>

<!-- Login Card -->
<div class="card w-full max-w-sm max-h-sm bg-base-100/80 backdrop-blur-md shadow-xl z-10">
    <div class="card-body">
        <!-- Logo -->
        <div class="flex justify-center mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <polygon points="10 8 16 12 10 16 10 8"></polygon>
            </svg>
        </div>

        <h2 class="card-title text-xl font-bold text-center justify-center mb-2">${param.authCardTitle}</h2>

        <form action="${pageContext.request.contextPath}/api/auth?action=<%=authPage%>" method="post">
            <div class="form-control">
                <input type="text" placeholder="请输入您的账号" class="input input-bordered bg-base-200/50"
                       required/>
            </div>

            <div class="form-control mt-4">
                <input type="password" placeholder="请输入您的密码" class="input input-bordered bg-base-200/50"
                       required/>
            </div>

            <div class="form-control mt-4">
                <div class="join w-full">
                    <input type="text" placeholder="请输入验证码"
                           class="input input-bordered bg-base-200/50 join-item flex-1" required/>
                    <div class="join-item bg-base-200/50 px-3 flex items-center">
                        <img src="<c:url value="/api/auth/captcha"/>" alt="验证码" class="h-8"/>
                    </div>
                </div>
            </div>

            <div class="flex justify-between mt-2 text-sm">
                <label class="cursor-pointer label">
                    <input type="checkbox" class="checkbox checkbox-sm checkbox-primary"/>
                    <span class="label-text ml-2">记住密码</span>
                </label>
                <c:choose>
                    <c:when test="${param.authCardType == '登录'}">
                        <a href="${param.authRegisterUrl}" class="link link-hover">注册账号</a>
                    </c:when>
                    <c:when test="${param.authCardType == '注册'}">
                        <a href="${param.authLoginUrl}" class="link link-hover">登录账号</a>
                    </c:when>
                </c:choose>
            </div>

            <div class="form-control mt-6">
                <button class="btn btn-primary">${param.authCardType}</button>
            </div>
        </form>
    </div>
</div>